<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<body>
      <script>
            // jsonp 请求发送;
            // 1. 创建一个script标签;
            // 2. 给script标签拼接url;
            // 3. 把script标签放在页面之中;

            // jsonp 响应接受;
            // 在封装之中怎么定义全局函数那?
            function formate( url , data ){
                  // 拼接字符串分成哪两种 : GET , POST ;
                  // 怎么去分辨 GET 和 POST 拼接 ?
                  // POST : 没有 url
                  // GET  : 有 url; 
                  var type = "GET";
                  if( arguments.length === 1){
                        // 此时为post请求的拼接;
                        type = "POST";
                        // 初始化数据 : 因为此时传入的参数只有一个，所以我们要补齐剩余参数;
                        data = url;
                        url = "";
                  }
                  // 拼接 : 
                  var start = true;
                  for(var key in data){
                        if( type === "GET"){
                              url += (start ? "?" : "&") + key + "=" + data[key];
                        }else if(type === "POST"){
                              url += (start ? "" : "&") + key + "=" + data[key];
                        }
                        start = false;
                  }
                  return url;
            }
            function ajax( method , url , _callback , data ){
                  // 一个逻辑让我们的回调函数有一个默认的名字;
                  data.jsonpcallback = data.jsonpcallback ? data.jsonpcallback : "callback";
                  // 请求发送;
                  var script = document.createElement("script");
                  script.src = formate( url , data );
                  document.body.appendChild( script );
                  // 响应接受; 全局函数去接受,怎么在函数作用域之中定义全局函数 ? 
                  // 1. 可以访问window对象么?
                  // console.log(window);
                  // 2. 向window对象上添加一个函数，这个函数是全局的函数么?
                  // 是的;
                  // 为了区分全局的callback和局部的callback，我们给局部的callback加上一个 _ , 变成 _callback
                  // window.callback => widnow[data.jsonpcallback] 
                  // 原因 : 为了让前端可以自定义全局函数名;

                  window[data.jsonpcallback] = function( data ){
                        _callback(data);
                  }
                  // 当script请求发起结束，接收到响应之后删除这个标签;
                  script.onload = function(){
                        script.remove();
                  }
            }
            ajax( "jsonp" , "https://api.gogoup.com/p1/data/recommend" , function(data){
                  console.log(data);
            } ,  {
                  type:0,
                  pageNo:2,
                  pageSize:5,
                  fromId:379,
                  // jsonpcallback:"hello",
                  _:Date.now()
            } )


      </script>
</body>
</html>